<script setup lang="ts">
import { App, Rect } from 'leafer-ui'
import { Editor } from '@leafer-in/editor' // 导入图形编辑器插件
setTimeout(() => {
  const app = new App({ view: window })

  app.tree = app.addLeafer()
  app.sky = app.addLeafer({ type: 'draw', usePartRender: false })

  app.editor = new Editor()
  app.sky.add(app.editor)

  app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100))
  app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100))
}, 0)
</script>

<template>
  <div class="gd-container">
    <div class="gd-header">

    </div>
    <div class="gd-side"></div>
    <div class="gd-canvas">
      <div id="canvas-container"></div>
    </div>
  </div>
</template>

<style scoped>
.gd-container {
  .gd-header {
    width: 100vw;
    height: 50px;
    background-color: #2b2d30;
    border-bottom: 1px solid #1e1f22;
  }

  .gd-side {
    width: 50px;
    height: calc(100vh - 50px);
    background-color: #2b2d30;
  }

  .gd-canvas {
    position: fixed;
    right: 0;
    top: 50px;
    left: 50px;
    border-left: 1px solid #1e1f22;
    height: calc(100vh - 50px);
    background-color: #26282e;
    #canvas-container {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
